<template>
	<view class="fix">
		<Fixtop>
			<template #l>
				<view class="iconfont icon-jiantouyou" @click="closepage"></view>
			</template>
			<template #c>
				<view class="tit">2/4门店信息</view>
			</template>
		</Fixtop>
	</view>
	<view class="" :style="{height:heights}"></view>
	<view class="infobox" style="position: relative;">
		<view class="bubox">
			<view class="bu" @click="next">下一步</view>
		</view>
		<view class="tip">
			为了方便我们与怒尽快联系达成合作，请如实填写以下资料，谢谢你的支持与配会!
		</view>
		<view style="margin-top: 30rpx;">
			<view class="item">
				<view class="l">负责人</view>
				<view class="r">
					<input v-model="usemdinfostore.mdinfo.name" class="item-r" type="text" placeholder="请输入负责人姓名" />
				</view>
			</view>
			<view class="item">
				<view class="l">手机号码</view>
				<view class="r">
					<view class="item-l">
						<view class="iconfont icon-jiahao"></view>
						63
						<view class="iconfont icon-jiantouyou ro90"></view>
					</view>
					<input v-model="usemdinfostore.mdinfo.phone" class="item-r" type="number" placeholder="请输入手机号" maxlength="11" />
				</view>
			</view>
		</view>
		<view style="margin-top: 30rpx;">
			<view class="item">
				<view class="l">主营品类</view>
				<view class="r">
					<view class="r-show">{{usemdinfostore.mdinfo.lx}}</view>
					<view class="iconfont icon-jiantouyou"></view>
				</view>
			</view>
			<view class="item">
				<view class="l">辅营品类</view>
				<view class="r" style="padding: 0;">
					<uni-data-picker ref="lxpop" placeholder="请选择类型" popup-title="请选择开店类型" :localdata="dataTree"
						@change="onchange" v-model="usemdinfostore.mdinfo.fzlx" >
					</uni-data-picker>
				</view>
			</view>
		</view>
		<view style="margin-top: 30rpx;">
			<view class="item">
				<view class="l">中文店名</view>
				<view class="r">
					<input v-model="usemdinfostore.mdinfo.dname" class="item-r" type="text" placeholder="请输入中文店名" />
				</view>
			</view>
			<view class="item">
				<view class="l">英文店名</view>
				<view class="r">
					<input  v-model="usemdinfostore.mdinfo.dymname"  class="item-r" type="text" placeholder="请输入英文店名" />
				</view>
			</view>
			<view class="item">
				<view class="l">所在地</view>
				<view class="r" style="padding: 0;">
					<uni-data-picker ref="addresspop" placeholder="请选择类型" popup-title="请选择开店类型" :localdata="arr"
						@change="onchangeaddress" v-model="usemdinfostore.mdinfo.address" >
					</uni-data-picker>
				</view>
			</view>
			<view class="item">
				<view class="l">详细地址</view>
				<view class="r">
					<input v-model="usemdinfostore.mdinfo.xxaddress" class="item-r" type="text" placeholder="请输入门店详细地址" />
				</view>
			</view>
		</view>
		<view class="imgbox">
			<view v-if="!usemdinfostore.mdinfo.img" class="t" @click="shooceimg">
				<view class="iconfont icon-zhaoxiangji"></view>
				<view class="d">点击上传</view>
			</view>
			<image v-else class="t" :src="usemdinfostore.mdinfo.img" mode="aspectFill" @click="shooceimg"></image>
			<view class="b">店铺门面图</view>
		</view>
		<view class="imgbox">
			<view v-if="!img2" class="t" @click="shooceimg2">
				<view class="iconfont icon-zhaoxiangji"></view>
				<view class="d">点击上传</view>
			</view>
			<image v-else class="t" :src="img2" mode="aspectFill" @click="shooceimg2"></image>
			<view class="b">店内真实环境图</view>
		</view>
		<view class="" style="height: 200rpx; background-color: #f5f5f5;"></view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	import Fixtop from '@/components/fixtop/fixtop.vue'
	import {
		arr
	} from '@/common/addr.js'
	import {
		getstatusheight,
		gettitleheight
	} from '@/utils/getsysteminfo.js'
	import mdinfostore from '@/store/mdinfo.js'
	const usemdinfostore=mdinfostore()
	const dataTree = [{
			text: "美食",
			value: "1-0",
			children: [{
					text: "快餐简餐",
					value: "1-1"
				},
				{
					text: "小吃",
					value: "1-2"
				},
				{
					text: "中式菜肴",
					value: "1-2"
				},
				{
					text: "全球美食",
					value: "1-2"
				},
				{
					text: "火锅",
					value: "1-2"
				}
			]
		},
		{
			text: "饮品",
			value: "2-0",
			children: [{
					text: "冰饮",
					value: "2-1"
				},
				{
					text: "热饮",
					value: "2-2"
				},
				{
					text: "甜饮",
					value: "2-3"
				},
				{
					text: "蜜雪系类",
					value: "2-4"
				}
			]
		},
		{
			text: "甜点",
			value: "3-0",
			children: [{
					text: "法式面包",
					value: "3-1"
				},
				{
					text: "蛋挞种类",
					value: "3-2"
				},
				{
					text: "蛋糕类型",
					value: "3-3"
				},
				{
					text: "炸点甜品",
					value: "3-4"
				}
			]
		}
	]
	const lxpop = ref()
	const addresspop = ref()
    const img2 = ref()
	const heights = getstatusheight() + gettitleheight() + 'px'
	const closepage = () => {
		uni.navigateBack()
	}
	const onchange = (e) => {
		usemdinfostore.mdinfo.fzlx = e.detail.value.map(e => e.text).join('/')
	}
	const lxpopshow = () => {
		lxpop.value.show()
	}
	const addresspopshow = () => {
		addresspop.value.show()
	}
	const onchangeaddress = e => {
		usemdinfostore.mdinfo.address= e.detail.value.map(e => e.text).join('/')
	}
	const shooceimg = () => {
		uni.chooseImage({
			count: 1,
			success(e) {
				usemdinfostore.mdinfo.img = e.tempFilePaths[0]
				console.log(e)
			}
		})
	}
	const shooceimg2 = () => {
		uni.chooseImage({
			count: 1,
			success(e) {
				img2.value = e.tempFilePaths[0]
				console.log(e)
			}
		})
	}
	const next=()=>{
		const ruset=Object.entries(usemdinfostore.mdinfo).find(e=>!e[1])
		if(ruset){
		return 	uni.showToast({
				title:"信息不完整！",
				icon:"none"
			})
		}
		console.log(usemdinfostore.mdinfo)
		uni.navigateTo({
			url:"/pages/userinfo/userinfo"
		})
	}
</script>

<style lang="scss" scoped>
	.fix {
		position: fixed;
		top: 0;
		background-color: #ff6e53;
		padding: 0 30rpx;
		width: 100%;
		z-index: 999;

		.iconfont {
			height: 100%;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			transform: rotate(180deg);
			font-size: 25rpx;
			color: #fff;

		}

		.tit {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 25rpx;
			color: #fff;
		}
	}

	.infobox {
		width: 100%;
		height: calc(100vh - v-bind(heights));
		background-color: #f5f5f5;

		&::-webkit-scrollbar {
			display: none !important;
		}

		.imgbox {
			height: 500rpx;
			width: 100%;
			background-color: #fff;
			margin-top: 30rpx;
			padding: 15rpx;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			align-items: center;
			justify-content: center;

			.t {
				height: 400rpx;
				width: 95%;
				background-color: #f4f4f4;
				border-radius: 10rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 10rpx;

				.iconfont {
					font-size: 70rpx;
					color: #7b7b7b;
				}

				.d {
					font-size: 28rpx;
					color: #7b7b7b;
				}
			}

			.b {
				font-size: 25rpx;
				font-weight: 700;
			}
		}

		.bubox {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 200rpx;
			background-color: #f5f5f5;
			display: flex;
			align-items: center;
			justify-content: center;
			border-top: 1rpx solid rgba(0, 0, 0, 0.1);
		}

		.bu {
			width: 90%;
			height: 80rpx;
			background-color: #ff6e53;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 25rpx;
			font-weight: 700;
			border-radius: 80rpx;
			color: #fff;
		}

		.tip {
			height: 110rpx;
			font-size: 22rpx;
			color: #7b7b7b;
			padding: 0 30rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.item {
			height: 120rpx;
			width: 100%;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;

			.l {
				width: 25%;
				font-size: 25rpx;
				font-weight: 700;
			}

			:deep(uni-data-picker) {
				padding: 0 !important;
				width: 100% !important;

				.input-value {
					border: none !important;
					font-size: 25rpx;
					padding-left: 20rpx;
				}
			}

			.r {
				width: 75%;
				height: 60%;
				display: flex;
				align-items: center;
				background-color: #f4f4f4;
				border-radius: 10rpx;
				padding: 0 10rpx;
				justify-content: space-between;

				.r-show {
					display: flex;
					padding: 0 10rpx;
					font-size: 25rpx;
				}

				.iconfont {
					font-size: 25rpx;
				}

				.item-l {
					width: 20%;
					display: flex;
					align-items: center;
					font-size: 26rpx;
					font-weight: 700;
					gap: 5rpx;

					.ro90 {
						transform: rotate(90deg);
					}

					.iconfont {
						font-size: 24rpx;
						font-weight: 700;
					}
				}

				.item-r {
					width: 80%;
					font-size: 25rpx;
				}
			}
		}
	}
</style>